<template>
    <div class="album">
        <!-- 专辑 -->
        <div class="top">
            <img :src="albumSongsList[0]?.al?.picUrl || 'https://img.zcool.cn/community/03196b456d7e744000001490d57799f.jpg'"
                alt="">
            <div class="history-play-list-title">
                <div>专辑</div>
                <div class="user">
                    <img :src="getUser()?.avatarImgIdStr || 'https://img.zcool.cn/community/03196b456d7e744000001490d57799f.jpg'"
                        alt="" srcset="">
                    <div>{{ getUser()?.userName }}</div>
                </div>
                <button @click="playAllSong">播放全部 {{ albumSongsList.length }}</button>
            </div>
        </div>
        <MusicList :data="albumSongsList" />
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, toRefs } from "vue";
import { useRoute } from "vue-router"
import { getAlbum } from "@/api/album"
import MusicList from "@/components/musicList.vue";
import useCounterStore from '@/stores/counter';
import { getUser } from "@/utils/auth"

const { playList, songInfo } = toRefs(useCounterStore());
const route = useRoute()
const albumSongsList = ref<Array<any>>([])
//播放当前全部历史歌曲
const playAllSong = () => {
    playList.value = albumSongsList.value
    songInfo.value = albumSongsList.value[0]
}

onMounted(async () => {
    // 获取专辑信息
    const { data } = await getAlbum({ id: route.query.id })
    // 判断获取是否成功
    if (data.code === 200) {
        // 将获取的专辑的歌曲列表赋值给albumSongsList
        albumSongsList.value = data.songs
        console.log(albumSongsList.value);
        
    }
})

</script>

<style scoped>
.album::-webkit-scrollbar {
    display: none;
}

.album {
    margin-top: 10vh;
    overflow: auto;
    height: 78vh;
    width: 100vw;
    width: 100%;
    height: 87%;
    color: aliceblue;
    overflow: auto;
    margin-top: 8%;
    position: relative;

    .top {
        display: flex;
        color: rgb(182, 198, 212);
        position: relative;
        padding: 0 3vw;
        font-size: 2vw;
        padding-bottom: 2vw;

        >img {
            width: 20%;
            height: 25vh;
            border-radius: 10px;
            margin-right: 2vw;

        }
    }
}

.history-play-list-title {
    >div {
        font-size: 18px;
        font-weight: 700;
    }

    >button {
        margin-top: 11vh;
        border: 0;
        border-radius: 4px;
        padding: 6px 26px;
        font-size: 10px;
        color: #000;
        font-weight: 700;
        cursor: pointer;
    }
}

.user {
    margin-top: 10px;
    display: flex;
    align-items: center;

    img {
        width: 2.5vw;
        height: 2.5vw;
        border-radius: 50px;
    }

    >div {
        margin-left: 0.4vw;
        font-size: 10px;
        font-weight: 100;
    }
}</style>